<template>
  <div class="face">
    <div class="top">top</div>
    <div class="body">{{title}}</div>
    <div class="foot">
      <footBar :class="{act:active}" v-for="(item,key) in foots" :key="key" @fromFootBar = "getMessage" :id="item.title">
        <img :src="item.urlImage" :alt="item.name">
        <div class="title">{{item.title}}</div>
      </footBar>
    </div>
  </div>
</template>

<script>

const footBar = ()=>import('@/components/componentsofflower/FootBar')
export default {
  name: 'Face1',
  data () {
    return {
      foots: [
        {urlImage: require('@/assets/Home.png'), name: '首页',title:'首页'},
        {urlImage: require('@/assets/Shopping.png'), name: '逛街',title:'逛街'},
        {urlImage: require('@/assets/Message.png'), name: '消息',title:'消息'},
        {urlImage: require('@/assets/Car.png'), name: '购物车',title:'购物车'},
        {urlImage: require('@/assets/Me.png'), name: '我的',title:'我的'},
      ],
      title:'首页',
      active: true
    }
  },
  components:{
    footBar
  },
  methods:{
    getMessage(data){
      this.title = data;
    }
  }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .top,.body,.foot {
    /* border: 1px solid blue; */
    margin-bottom: 10px;
  }
.face{
  margin:0;
  padding:0;
  height:100vh;
  overflow:hidden;
}
  .top {
    height: 10%;
    overflow:hidden;
  }
  .body {
    height: 76%;
    overflow:hidden;
  }
  .foot {
    height: 10%;
    overflow:hidden;
  }

  .body {
    text-align: center;
  }
</style>

